<template>
  <div>
    <!-- 树形展开 -->
    <div v-if="canHide" class="treemenu-open" @click="showHideLeftTree(true)"><svg-icon class-name="icon" icon-class="shuangjiantouyou" /></div>
    <!-- 树形展开 -->
    <div class="org-tree-box">
      <div class="tree-header">
        <div class="title">组织架构</div>
        <div class="search">
          <el-input v-model="treeSearchVal" size="mini" placeholder="搜索">
            <svg-icon slot="prefix" class-name="tree-search-icon" icon-class="sousuo-solid" />
          </el-input>
        </div>
      </div>
      <div v-loading="orgTreeLoading" class="tree-list" :style="{height: newHeight+'px'}">
        <el-scrollbar class="page-scrollbar">
          <el-tree
            ref="orgMenuTree"
            :data="treeList"
            node-key="id"
            :props="defaultProps"
            :show-checkbox="showCheckbox"
            :filter-node-method="filterTreeMenu"
            :expand-on-click-node="false"
            @check-change="treeCheckChange"
            @node-click="treeNodeClick">
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <div class="name-text-box"><svg-icon class-name="wenjianjia" icon-class="wenjianjia-color" /><span class="name-text" :title="node.label">{{ node.label }}</span></div>
              <span class="add-icon" :class="showAdd?'show':''" @click.stop="addHandelClick(data)"><svg-icon class-name="add" icon-class="tianjiajia-solid" /></span>
            </div>
          </el-tree>
        </el-scrollbar>
      </div>
      <!-- 树形收缩 -->
      <div v-if="canHide" class="treemenu-close" @click="showHideLeftTree(false)"><svg-icon class-name="icon" icon-class="shuangjiantouzuo" /></div>
      <!-- 树形收缩 -->
    </div>
  </div>
</template>

<script>
import { getOrgList } from './apis/org.tree.js'
export default {
  name: 'OrgTree',
  props: {
    height: {
      type: Number,
      default() {
        return null
      }
    },
    showAdd: {
      type: Boolean,
      default() {
        return false
      }
    },
    showCheckbox: {
      type: Boolean,
      default() {
        return false
      }
    },
    canHide: {
      type: Boolean,
      default() {
        return false
      }
    },
    checkAuth: {
      type: Boolean,
      default() {
        return true
      }
    },
    apiParams:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      orgTreeLoading: false,
      newHeight: this.height,
      treeSearchVal: '',
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    treeSearchVal(val) {
      this.$refs.orgMenuTree.filter(val)
    }
  },
  mounted() {
    // 获取组织列表
    this.initTree()
    if(!this.height) {
      this.treeHeight()
      const _this = this
      window.addEventListener('resize',function () {
        _this.treeHeight()
      })
    }
  },
  methods: {
    // 初始化组织列表数据
    initTree(){
      this.orgTreeLoading = true
      getOrgList(this.apiParams).then(res => {
        this.treeList = res.data
        this.$emit('get-data', res.data)
        this.orgTreeLoading = false
      })
    },
    // 树形菜单过滤
    filterTreeMenu(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 组织点击
    treeNodeClick(data1,data2,data3) {
      if (this.checkAuth=== true && data1.isOpt === false) {
        this.$message({
          message: '你没有该组织权限',
          type: 'warning'
        })
        return
      }
      this.$emit('node-click', data1,data2,data3)
    },
    // 组织选择框
    treeCheckChange(data1,data2,data3) {
      if (this.checkAuth === true && data1.isOpt === false) {
        this.$message({
          message: '你没有该组织权限',
          type: 'warning'
        })
        return
      }
      this.$emit('check-change', data1,data2,data3)
    },
    // 点击添加
    addHandelClick(data) {
      if (this.checkAuth === true && data.isOpt === false) {
        this.$message({
          message: '你没有该组织权限',
          type: 'warning'
        })
        return
      }
      this.$emit('add-click', data)
    },
    // 高度计算
    treeHeight() {
      this.$nextTick(() => {
        if (self !== top) {
          this.newHeight = window.innerHeight - 90
        } else {
          this.newHeight = window.innerHeight - 187
        }
      })
    },
    // 关闭树形菜单
    showHideLeftTree(show) {
      const left = document.querySelector('.org-tree-box')
      const open = document.querySelector('.treemenu-open')
      if (show) {
        left.classList = 'org-tree-box'
        open.classList = 'treemenu-open'
      } else {
        left.classList = 'org-tree-box hide'
        open.classList = 'treemenu-open show'
      }
      this.$emit('tree-show-hide', show)
    }
  }
}
</script>

